<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            position: relative;
        }

        #block {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <canvas width="310" height="155" id="canvas"></canvas>
        <canvas width="310" height="155" id="block"></canvas>

    </div>
    <script>

        var x = 150,
            y = 40,
            w = 42,
            r = 10,
            PI = Math.PI

        var canvas = document.getElementById('canvas')
        var block = document.getElementById('block')
        var canvas_ctx = canvas.getContext('2d')
        var block_ctx = block.getContext('2d')
        var img = document.createElement('img')
        img.onload = function() {
            drawB(canvas_ctx, x,y, 'fill')
            drawB(block_ctx, x,y, 'clip')
            canvas_ctx.drawImage(img, 0, 0, 310, 155)
            block_ctx.drawImage(img, 0, 0, 310, 155)
            var blockWidth = w + r * 2
            var _y = y - r * 2 - 1 // 滑块实际的y坐标
            var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
            block.width = blockWidth
            block_ctx.putImageData(ImageData, 0, _y)
        };
        img.src = 'img.jpg';

        

        function draw(ctx, operation) {
            ctx.beginPath()
            ctx.moveTo(x, y)
            ctx.lineTo(x + w / 2, y)
            ctx.arc(x + w / 2, y - r + 2, r, 0, 2 * PI) //
            ctx.lineTo(x + w / 2, y)
            ctx.lineTo(x + w, y)
            ctx.lineTo(x + w, y + w / 2)
            ctx.arc(x + w + r - 2, y + w / 2, r, 0, 2 * PI) //
            ctx.lineTo(x + w, y + w / 2)
            ctx.lineTo(x + w, y + w)
            ctx.lineTo(x, y + w)
            // ctx.clip()

            ctx.lineWidth = 2
            // ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
            ctx.fillStyle = '#F0F0F0'
            ctx[operation]()

            ctx.beginPath()
            ctx.arc(x, y + w / 2, r, 1.5 * PI, 0.5 * PI) // 只需要画正方形内的半圆就行，方便背景图片的裁剪
            ctx.globalCompositeOperation = "xor"
            // ctx.fillStyle = '#F0F0F0'
            ctx.fill()
        }
        

        function drawB(ctx, x, y, operation) {
            let l = w;
            console.log('x, y, l, r_>', x, y, l, r);
            ctx.beginPath()
            ctx.moveTo(x, y)
            ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
            ctx.lineTo(x + l, y)
            ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
            ctx.lineTo(x + l, y + l)
            ctx.lineTo(x, y + l)
            ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
            ctx.lineTo(x, y)
            ctx.lineWidth = 2
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
            ctx.stroke()
            ctx[operation]()
            ctx.globalCompositeOperation = 'overlay'
        }
    </script>
</body>

</html>